<template>
  <div class="goodsList">
    <div class="box-van-tabs">
      <van-tabs v-model:active="active" @click-tab="changeGoodsList">
        <van-tab
          v-for="item in goodsListTitle"
          :title="item.name"
          :key="item.id"
          :name="item.id"
        ></van-tab>
      </van-tabs>
    </div>

    <!-- 阴影部分 -->
    <div class="shadow"></div>

    <!-- 商品分类标题 -->
    <div class="goodsName">
      <p>{{ goodsName }}</p>
    </div>

    <!-- 商品列表区域 -->
    <ul class="goodsList-bottom">
      <li
        class="goodsList-bottom-item"
        @click="toGoodsDetail"
        v-for="item in goodsList"
        :key="item.id"
      >
        <img :src="item.listPicUrl" alt="" />
        <p class="title">{{ item.name }}</p>
        <van-tag round plain type="primary" color="#c0c0c0">
          <van-icon name="bill" color="#ff0000" />
          可用红包
        </van-tag>
        <p class="price">
          到手<span>￥{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
        </p>
        <van-tag round type="primary" color="#ff0000" class="price-bottom">满99减30元</van-tag>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reqGoodsList } from '@/api/categoryList'
import type { IResCategory } from '@/types/categoryList'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const active = ref(0)

// 获取 query传参
const { id, superCategoryId } = route.query
// 商品列表上方标签栏
const goodsListTitle = ref<IResCategory[]>()
// 商品列表数据
const goodsList = ref()
// 商品名称
const goodsName = ref()

// 获取商品列表数据
const getGoodsList = async (id: any, superCategoryId: any) => {
  // 调用api 获取数据
  const res = await reqGoodsList(id, superCategoryId)
  // console.log(res)
  // 进行赋值
  // 上方商品列表title
  goodsListTitle.value = res.data.categoryL2List
  // 下方商品列表
  goodsList.value = (res.data as any).categoryItems.itemList
}

// 切换上方商品标题
const changeGoodsList = (e: any) => {
  // console.log(1)
  // 获取id
  const spuId = e.name
  // console.log(e)
  // 进行赋值
  goodsName.value = e.title
  // 重新调用方法 获取下方商品数据
  getGoodsList(spuId, superCategoryId)
}

// 跳转到商品详情页面
const toGoodsDetail = () => {
  // console.log(id, superCategoryId)
  router.push('/goodsDetail')
}

onMounted(() => {
  // 调用 获取商品列表数据 的方法
  getGoodsList(id, superCategoryId)
})
</script>

<script lang="ts">
export default {
  name: 'GoodsListView'
}
</script>

<style lang="less" scoped>
.goodsList {
  .box-van-tabs {
    height: 59px;
  }
  .van-tabs {
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 99;
  }
  // 阴影
  .shadow {
    height: 7px;
    background: #f0f0f0;
  }
  .goodsList-bottom {
    width: 365px;
    height: 280px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goodsList-bottom-item {
      padding-left: 8px;
      width: 170px;
      margin-bottom: 15px;
      img {
        width: 170px;
        height: 170px;
        border-radius: 5%;
      }
      .title {
        margin: 0px;
        font-size: 12px;
        margin-top: 2px;
      }
      .van-tag {
        margin: 0px;
      }
      .price {
        margin: 0px;
        margin-top: 2px;
        color: red;
        font-weight: 700;
        font-size: 15px;
        span {
          font-size: 20px;
        }
      }
      .price-bottom {
        font-weight: 700;
        margin: 0px;
      }
    }
  }
  .goodsName {
    text-align: center;
    font-size: 15px;
  }
}
</style>
